<template>
    <div>
        <!-- 二级路由的坑 -->
        <router-view v-if="$route.path==='/home/search'"></router-view>
        <router-view v-else-if="$route.path==='/home/channel'"></router-view>
        
        <div v-else>
        <!-- Home搜索框 -->
        <van-search v-model="value" placeholder="请输入搜索关键词" shape="round" @click="gosearch" />
        <!-- Swiper轮播图 -->
        <Swiper :bannerArr='bannerArr'></Swiper>
        <!-- 导航组件 -->
        <Gird :channelArr='channelArr' @click="$router.push('/home/channel')"></Gird>
        <!-- 品牌制造商直供 -->
        <Brand :brandList='brandList'></Brand>
        <!-- 新品首发 -->
        <NewGoodsList :newGoodsListArr='newGoodsListArr'></NewGoodsList>
        <!-- 人气推荐 -->
        <HotGoodsList :HotGoodsListArr='HotGoodsListArr'></HotGoodsList>
        <!-- 专题精选 -->
        <TopicList :TopicListArr='TopicListArr'></TopicList>
        <!-- 首页商品列表 -->
        <div v-for="item in CategoryListArr" :key="item.id">
            <h4>{{item.name}}</h4>
            <CategoryList :GoodsListArr='item.goodsList'></CategoryList>
        </div> 
        
        </div>
        
    </div>
</template>
<script>
// 导入轮播图
import Swiper from '@/components/Swiper'
// 导入首页接口
import {getIndexData} from '@/utils/http'
// 导航
import Gird from '@/components/Gird'
// 品牌制造商直供
import Brand from '@/components/Brand'
// 新品首发
import NewGoodsList from '@/components/NewGoodsList'
// 人气推荐
import HotGoodsList from '@/components/HotGoodsList'
// 专题精选
import TopicList from '@/components/TopicList'
// 首页商品列表
import CategoryList from '@/components/CategoryList'
export default {
  // eslint-disable-next-line vue/multi-word-component-names
    name:'Home',
    data(){ 
        return {
            value:'',// 搜索关键字,
            bannerArr:[],// 轮播图请求数据
            channelArr:[],// 导航请求数据
            brandList:[],// 品牌制造商直供
            newGoodsListArr:[],// 新品首发
            HotGoodsListArr:[],// 人气推荐
            TopicListArr:[],//专题精选
            CategoryListArr:[],//首页商品列表
            GoodsListArr:[],
        }
    },
    components:{
        Swiper,
        Gird,
        Brand,
        NewGoodsList,
        HotGoodsList,
        TopicList,
        CategoryList,
    },
    created(){
        getIndexData().then(res=>{
            console.log(res);
            this.bannerArr = res.data.banner
            this.channelArr = res.data.channel
            this.brandList = res.data.brandList
            this.newGoodsListArr = res.data.newGoodsList
            this.HotGoodsListArr = res.data.hotGoodsList
            this.TopicListArr = res.data.topicList
            this.CategoryListArr = res.data.categoryList
            this.GoodsListArr = res.data.categoryList.goodsList
        })
        // console.log(this.$route.meta);
    },
    methods:{
        gosearch(){
            this.$router.push('/home/search')
        }
    }
}
</script>

<style scoped>
    h4{
        text-align: center;
        height: 50px;
        line-height: 50px;
        color: #000;
        font-size: 22px;
    }
</style>